<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				var photo = document.getElementById('myPhoto');
				photo.src = imgUrl;
				displayImage();
				loadImage1();
			};
			//Global variables
			var imgUrl = "../../img/kestral.png";
			var myImage = new Image(); // Create a new blank image.
			// Load the image and display it.
			function displayImage() {
				// Get the canvas element.
				canvas = document.getElementById("myCanvas");
				// Make sure you got it.
				if (canvas.getContext) {
					// Specify 2d canvas type.
					ctx = canvas.getContext("2d");
					// When the image is loaded, draw it.
					myImage.onload = function() {
						// Load the image into the context.
						ctx.drawImage(myImage, 0, 0);
						// Get and modify the image data.
						changeImage();
					}
					// Define the source of the image.
					myImage.src = imgUrl;
				}
			}

			function changeImage() {
				ctx.strokeStyle = "white";
				ctx.lineWidth = "100";
				ctx.beginPath();
				ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
				ctx.closePath();
				ctx.stroke();
			}
			
			function loadImage1(){
				var img_src = '';				
				var img = new Image();   // Create new Image object
				img.onload = function(){
					 // execute drawImage statements here
				}

				img.src = img_src; // Set source path
				var body = document.getElementById('body');
				body.appendChild(img);
			}
				
		</script>
	</head>
	<body id="body">
		<h1> American Kestral</h1>
		<p>The original image is on the left and the modified image is on the right.</p>
		<img id="myPhoto" />
		<canvas id="myCanvas" width="200" height="200"></canvas>
				
	</body>
</html>
